<template>
    <div style="text-align:center">
        <x-header :title="title"></x-header>
        <div class="preview-div">
            <img class="preview-back" src="../assets/img/img_certificate.jpg">
            <img class="preview-front" :style="{width:imgWidth +'px'}" src="../assets/img/img_placeholder.jpg">
        </div>
        <vue-core-image-upload class="upload-btn" inputOfFile="file" :crop="false" @imageuploaded="imageuploaded" text="" :max-file-size="5242880" compress="90" :url="uploadUrl">
            <x-button type="primary" mini>重新选择照片</x-button>
        </vue-core-image-upload>
        <x-button type="primary" mini link="Apply">确定照片</x-button>
    </div>
</template>
<script>
import { XHeader, XButton } from "vux";
import VueCoreImageUpload from "vue-core-image-upload";
export default {
  components: { XHeader, XButton, VueCoreImageUpload },
  data() {
    return {
      title: "证书效果预览",
      screenWidth: "",
      imgWidth: "",
      src: "",
      uploadUrl: "/api/common/uploadImg"
    };
  },
  created: function() {
    const vm = this;
    vm.screenWidth = document.body.clientWidth;
    vm.uploadUrl = "http://" + window.location.host.concat(vm.uploadUrl);
    vm.imgWidth = vm.screenWidth / 800 * 130;
    vm.top = vm.screenWidth / 800 * 1133 * 0.4;
  },
  methods: {
    imageuploaded: function(res) {
      const vm = this;
      vm.imgSrc = require("../assets/img/img_demo.jpg");
    }
  }
};
</script>
<style scoped>
.preview-div {
  width: 100%;
  position: relative;
}
.preview-back {
  width: 100%;
}
.preview-front {
  position: absolute;
  left: 18%;
  top: 39%;
}
.ximg {
  width: 100%;
  height: auto;
}
</style>